import React,{useState,useEffect} from 'react'
import { Table, Tag, Space } from 'antd';
import { history } from 'umi';
import {post} from '@/Utils/axios'
import {Url} from '@/Utils/services/url'
export default function table(props:any) {
    const [list,setList] = useState([])
    const [state,setState] = useState([])
    const [pageNum,setPageNum] = useState(1)
    const [pageSize,setPageSize] = useState(5)
    const [total,setTotal] = useState(0)
    function handlePageChange(page:any){
      setPageNum(page)
      props.changePageNum(page)
    }
    useEffect(()=>{
      setTotal(props.total)
    },[props.total])
    const paginationProps = {
      current: pageNum, //当前页码
      pageSize:pageSize, // 每页数据条数
      showTotal: () => (
        <span>总共{total}项</span>
      ),
      total:total, // 总条数
      onChange: (page:any) => handlePageChange(page), //改变页码的函数
      hideOnSinglePage: false,
      showSizeChanger: false
    }
    const columns = [
        {
          title: '活动名称',
          dataIndex: 'activityName',
          key: 'activityName',
          width:120,
        },
        {
          title: '创建人',
          dataIndex: 'creator',
          width:120,
          key: 'creator',
        },
        {
          title: '创建时间',
          dataIndex: 'gmtCreated',
           width:200,
          key: 'gmtCreated',
        },
        {
            title: '活动时间',
            width:220,
            dataIndex: 'startDate',
            key: 'startDate',
            render: (text:any,row:any) => {
                let name = `${text} - ${row.endDate}`
                return <span>{name}</span>
            },
          },
          {
            title: '状态',
            width:100,
            dataIndex: 'activityStatus',
            key: 'activityStatus',
            render:(text:Number,row:Object) =>{
                let name:Object = cleanState(text)
                return <span>{name.label}</span>
            }
          },
        {
          title: '操作',
          key: 'action',
          dataIndex: 'id',
          width:100,
          render: (text:string, record:object) => {
            return (<div>
              {record.isDraft == true && <a onClick={()=>editDataInfo(record)} style={{marginRight:'5px'}}>编辑</a>}
             
              <a onClick={()=>goDataInfo(record)}>详情</a>
            </div>)
          }
          ,
        },
      ];
      function editDataInfo(record:object){
        post(Url.dataInfo,{activityBasicId:record.activityBasicId}).then(res =>{
          history.push({
            pathname:'/index/create',
            state: {              //传递的数据
              data:res
            },
          })
        })  
      }
      function goDataInfo(record:object){
        post(Url.dataInfo,{activityBasicId:record.activityBasicId}).then(res =>{
          history.push({
            pathname:'/index/activityInfo',
            state: {              //传递的数据
              data:res
            },
          })
        })  
      }
      useEffect(()=>{
          setList(props.tableData)
      },[props.tableData])
      useEffect(()=>{
        setState(props.state)
    },[props.state])
    function cleanState(item:Number){
        const name = state.filter((t:any)=>t.value === item)
        return name[0]
    }
  return (
        <Table 
          columns={columns} 
          dataSource={list} 
          pagination={paginationProps}
          rowKey='id'
          
          />
  )
}
